<template>
    <div class="wrapper">
        <div class="box">
            <!-- 头像区域 -->
            <header>
                <img src="../../assets/login_1.png" alt="" />
            </header>

            <!-- 登录表单区域 -->
            <el-form ref="loginFrom" class="from" :model="form" :rules="rules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input
                        prefix-icon="iconfont icon-user"
                        placeholder="请输入用户名"
                        v-model="form.username"
                    ></el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        prefix-icon="iconfont icon-pass"
                        placeholder="请输入密码"
                        v-model="form.password"
                    ></el-input>
                </el-form-item>

                <!-- 登录和重置按钮 -->
                <el-row class="float">
                    <el-button type="primary" @click="checkFrom"
                        >登录</el-button
                    >
                    <el-button @click="resetFrom">重置</el-button>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            // 表单数据绑定
            form: {
                username: "admin",
                password: "123456",
            },

            // 表单的验证规则
            rules: {
                username: [
                    {
                        required: true,
                        message: "用户名不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 20,
                        message: "长度在 3 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 20,
                        message: "长度在 3 到 20 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        // 重置表单对象
        resetFrom() {
            this.$refs.loginFrom.resetFields();
        },
        // 校验表单数据是否合法
        checkFrom() {
            this.$refs.loginFrom.validate(async (checkResult) => {
                if (!checkResult) return;
                try {
                    let { data } = await this.$http.post("/login", this.form);
                    if (data.meta.msg === "登录成功") {
                        // 登录成功提示框
                        this.$message.success(data.meta.msg);

                        // 1.登录成功后的token保存到sessionStorage中
                        // 项目中除了登录之外的其他api接口，必须登录之后才能访问
                        // token只应在当前网站中打开生效，所以将token保存在sessionStorage中
                        // 2.通过编程式路由导航跳转到后台主页，路由地址是/home

                        // 保存token到sessionStorage里面
                        sessionStorage.setItem("token", data.data.token);
                        clearTimeout(this.clearTime);
                        // 登录成功之后等待一秒钟在跳转
                        this.clearTime = setTimeout(() => {
                            this.$router.push("/home");
                        }, 1000);
                    } else {
                        // 登录失败后提示框
                        this.$message.error(data.meta.msg);
                    }
                } catch (error) {
                    console.error(error);
                }
            });
        },
    },
};
</script>

<style lang='less' scoped>
.wrapper {
    width: 100%;
    height: 100%;
    background: #2b4b6b;
    .box {
        width: 450px;
        height: 300px;
        background: white;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        header {
            width: 150px;
            height: 150px;
            background-color: white;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            box-shadow: 0px 0px 20px 1px white;
            img {
                width: 85%;
                height: 85%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                background-color: rgb(232, 241, 241);
            }
        }
        .from {
            margin-top: 100px;
            padding: 0px 20px;
            .float {
                float: right;
            }
        }
    }
}
</style>